<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: red !important;
        }
    </style>
    <script>
        window.onload = function() {
            //点击按钮后修改box的大小
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function() {
                // 修改box1的宽度
                // 通过JS修改元素的样式
                // 语法：元素.style.样式名=样式值
                // 注意：如果css样式名中含有-
                // 这种名称在JS中时不合法的
                // 需要将这种样式修改为驼峰命名法
                // 去掉- 然后将 - 后的字母大写


                // 我们通过style设置的属性都是内联样式
                // 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

                // 但是如果在样式中写了 !important 此时样式会拥有最高的优先级 
                // 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失败
                box1.style.backgroundColor = "pink";
                box1.style.width = "100px";
                box1.style.height = "500px";

            };

            var btn02 = document.getElementById("btn02");
            btn02.onclick = function() {
                // 读取box1的样式
                // 语法  元素。style.样式名
                // 通过style属性设置和读取都是内联样式
                // 无法读取样式表中的样式


                alert(box1.style.width);
            };

        };
    </script>
</head>

<body>
    <div id="box1">
        <button id="btn01">点我一下</button>

        <button id="btn02">nanniu2</button>


    </div>


</body>

</html>